<template>
	<view class="main">
		<wyb-popup ref="popup" :maskAlpha="0.2" mode="size-fixed" :maskClickClose="false" type="bottom" height="400" width="500" radius="6" :showCloseIcon="false">
			<!-- 身份验证框 -->
			<view  class="yanzheng">
				<view class="title">身份验证</view>
				<view class="yanzheng-body">
					<view class="nameAndPhone">
						<!-- <image class="nameImg" src="../../static/img/paper_name.png"></image> -->
						<!-- <span>姓名</span> -->
						<input @focus="focus" @blur="blur"  v-model="yanzheng.name" placeholder="姓名"/>
					</view>
					<view class="nameAndPhone" >
						<input @focus="focus" @blur="blur" maxlength="11" v-model="phone" placeholder="手机号码"/>
					</view>
					<view class="nameAndPhone">
						<input @focus="focus" class="message" @blur="blur" maxlength="6" v-model="mobileCode" placeholder="短信验证码"/>
						<view class="code" @tap="getPhonecode">{{codeBtn.codeText}}</view>
					</view>
					
					<button @click="memberLogin"  size="mini">
						确定
					</button>
				</view>
			</view>	
		</wyb-popup>
	</view>
</template>

<script>
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	import Cookies from 'js-cookie'
	import qs from 'qs'
	export default {
		components: {
			wybPopup,
		},
		data() {
			return {
				id:'',
				//验证码按钮
				codeBtn: {
					codeTime: 60,
					codeText: "获取验证码",
					codeStatus: true
				},
				phone:'',
				mobileCode:'',
				//验证规则
				rules: {
					phone: {
						rule: /^1[3456789]\d{9}$/,
						msg: "手机号格式错误"
					},
					mobileCode: {
						rule: /^[0-9]{6}$/,
						msg: "请输入6位数字验证码"
					}
				},
				yanzheng: {
					name: null,
					mobile: null,
					mobileCode:null,
				},
			};
		},
		onLoad(opt) {
			console.log(opt);
			this.id = opt.id;
			// uni.showLoading({
			// 	title: '正在跳转中...',
			// 	mask: true
			// })
		},
		onShow() {
			// this.$refs.popup.show();
			this.getCourseQrCode(this.id)
		},
		onUnload() {
			uni.hideLoading()
		},
		methods:{
			memberLogin() {
				if (!this.yanzheng.name) {
					uni.showToast({
						title: '姓名不能为空！',
						duration: 2000,
						icon: 'error',
						mask: true
					});
					return;
				} else if (this.yanzheng.name.length > 8) {
					uni.showToast({
						title: '姓名长度不能超过八位',
						duration: 2000,
						icon: 'error',
						mask: true
					});
					return;
				}
				if(this.validate('phone') && this.validate('mobileCode')){
					this.yanzheng.mobile = this.phone;
					this.yanzheng.mobileCode = this.mobileCode;
					uni.showLoading({
						title: "验证中..."
					})
					// 通过手机号码和验证码获取临时登录token
					this.$http.get('/f/loginByMobile?' + qs.stringify(this.yanzheng))
						.then(res => {
							console.log(res,555666111)
							uni.setStorageSync("token",res.data.token,{ expires: 1 });
							this.$refs.popup.hide();
							//重新调用校验接口
							this.getCourseQrCode(this.id)
							uni.hideLoading();
						})
						.catch(error => {})
				}
				
			},
			//判断验证是否符合要求，合法性校验
			validate(key){
				let bool=true;
				if(!this.rules[key].rule.test(this[key])){
					//提示信息
					uni.showToast({
						title:this.rules[key].msg,
						icon:'none',
					})
					//取反
					bool=false;
					return false;
				}
				return bool;
			},
			//获取验证码按钮点击计时事件
			getPhonecode() {
				if(this.validate('phone') && this.codeBtn.codeStatus) {
					this.codeBtn.codeStatus = false
					let timerId = setInterval(() => {
						let codetime = this.codeBtn.codeTime
						codetime--
						this.codeBtn.codeTime = codetime
						this.codeBtn.codeText = codetime + "s"
						if(codetime < 1) {
							clearInterval(timerId)
							this.codeBtn.codeText = "重新获取"
							this.codeBtn.codeTime = 60
							this.codeBtn.codeStatus = true
						}
					},1000)
					this.$http.get('/f/getMobileValidate?mobile=' + this.phone).then(function(response) {
					  uni.showToast({
						  title:'短信已发送',
					  })
					}).catch(function(error) {
					  console.log(error);
					})
				}
			},
			focus() {
				this.scrollTop = document.scrollingElement.scrollTop;
			},
			blur() {
				document.scrollingElement.scrollTo(0, this.scrollTop);
			},
			getCourseQrCode(id){
				let that = this
				this.$http.get("/f/getCourseQrCode?id=" + id)
				.then(function (response) {
					let msg = response.msg
					if(msg){
						if(msg == '请验证手机号码'){
							that.$refs.popup.show()
						}else if(msg == '请登录'){
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}
					}else{
						console.log("跳转到课程或者考试")
						//跳转到课程或者考试
						let courseType = response.data.qrCourseType
						if(courseType == '2'){
							uni.navigateTo({
								url:'/pages/course/test?id=' + response.data.paperId
							})
						}else if(courseType == '15'){
							console.log("跳转到ppt课程")
						}else{
							uni.navigateTo({
								url:'/pages/course/content?id=' + response.data.courseId
							})
						}
					}
					
				})
				.catch(function (error) {
				  console.log(error);
				})
			}
		}
	}
</script>

<style lang="less">
	.main{	
		.yanzheng {
			// opacity: 0.8;
			// background-color: red;
			// position: absolute;
			// bottom: 0;
			// left: 3%;
			width: 100%;
			// height: 500rpx;
			background-color: #ffffff;

			.title {
				padding-top: 20px;
				text-align: center;
				width: 100%;
				height: 80rpx;
				// background-color: #399ee4;
				font-size: 20px;
				line-height: 80rpx;
				color: #000113;
			}

			.yanzheng-body {
				width: 100%;
				min-height: 320rpx;
				// background-color: #effaff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.nameAndPhone {
					width: 100%;
					display: flex;
					margin-bottom: 40rpx;
					justify-content: center;
					align-items: center;
					.message{
						width: calc(80% - 100px) !important;
					}
					.code{
						width: 100px;
						text-align: center;
						background-color: #0076ca;
						color: white;
						height: 40px;
						line-height: 40px;
						border-radius: 8px;
						cursor: pointer;
					}
					span {
						margin-right: 40rpx;
						color: #9D9B9B;
						font-size: 16px;
						font-weight: bold;
					}

					input {
						display: inline-block;
						border-bottom: 1px solid #c5c3c3;
						width: 80%;
						height: 40px;
						// background-color: white;
						padding: 0 10rpx;
					}

					image {
						margin-right: 10rpx;
					}

					.nameImg {
						width: 40rpx;
						height: 40rpx;
					}

					.phoneImg {
						width: 35rpx;
						height: 35rpx;
					}
				}
				.weixinlogin{
					margin-bottom: 20px;
					color: #0076CA;
					cursor: pointer;
				}

				button {
					margin-bottom: 20px;
					width: 80%;
					color: white;
					font-weight: bold;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 16px;
					background-color: #0076ca;
					// .icon{
					// 	position: relative;
					// 	top: -12rpx;
					// }
				}
			}
		}
	}
</style>
